window.onload = function () {

    /**
     * mv轮播图
     */
    let left = document.querySelector(".button-left")
    let right = document.querySelector(".button-right")
    let mv = document.querySelectorAll(".mv")
    let mvs = document.querySelector(".mvs")
    // index用来计算和控制图片的位置
    let index = 0;
    let time;

    // // 结合index来定义当前图片的位置
    function position() {
        mvs.style.left = (index * - 840 + 180) + "px"
    }

    function small(obj) {
        obj.style.width = 600 + "px";
    }

    function big(obj) {
        obj.style.width = 800 + "px";
    }

    // 创建一个timer来当做复用时间的函数
    function timer() {
        time = setInterval(function () {
            position();
            index++;
            if (index >= 3) {
                index = 0;
            }
            if (index == 0) {
                mv[0].style.transform = "scale(0.8)"
                mv[2].style.transform = "scale(1)"
                mv[1].style.transform = "scale(0.8)"
            }
            if (index == 1) {
                mv[1].style.transform = "scale(0.8)"
                mv[0].style.transform = "scale(1)"
                mv[2].style.transform = "scale(0.8)"
            }
            if (index == 2) {
                mv[0].style.transform = "scale(0.8)"
                mv[1].style.transform = "scale(1)"
                mv[2].style.transform = "scale(0.8)"
            }

        }, 2500)
    }

    right.onclick = function () {
        // clearInterval(time);
        if (index == 0) {
            index = 2;
            mv[1].style.transform = "scale(0.8)"
            mv[0].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(1)"
        }
        else if (index == 1) {
            index = 0;
            mv[0].style.transform = "scale(1)"
            mv[1].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(0.8)"
        }
        else if (index == 2) {
            index = 1;
            mv[0].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(0.8)"
            mv[1].style.transform = "scale(1)"
        }
        position();
    }

    left.onclick = function () {
        if (index == 0) {
            index = 1;
            mv[0].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(0.8)"
            mv[1].style.transform = "scale(1)"
        }
        else if (index == 1) {
            index = 2;
            mv[1].style.transform = "scale(0.8)"
            mv[0].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(1)"
        }
        else if (index == 2) {
            index = 0;
            mv[0].style.transform = "scale(1)"
            mv[1].style.transform = "scale(0.8)"
            mv[2].style.transform = "scale(0.8)"
        }
        position();
    }

    timer();


    /**
     * 顶部轮播图
     */
    var imgArr = document.querySelectorAll('.img');
    var min = document.querySelectorAll('.min');

    var count = 0;
    for (var i = 0; i < imgArr.length; i++) {

        clearInterval(autoChange);
        // 给图片添加索引
        imgArr[i].num = i;
        min[i].num = i;

        min[i].onclick = function () {
            count = this.num;
            for (var j = 0; j < imgArr.length; j++) {
                imgArr[j].style.opacity = 0;
            }
            imgArr[count].style.opacity = 1;
        }
        autoChange();

    }
    autoChange();
    var auto;
    function autoChange() {
        auto = setInterval(function () {
            count++;
            if (count > 2) {
                count = 0;
            }
            for (var j = 0; j < imgArr.length; j++) {
                imgArr[j].style.opacity = 0;
            }
            imgArr[count].style.opacity = 1;
        }, 3000);
    }

    /**
     * 专辑选择动画
     */
    var cdFront = document.querySelectorAll('.cd-front');
    var cdBehind = document.querySelectorAll('.cd-behind');
    var textFront = document.querySelectorAll('.text-front');
    var textBehind = document.querySelectorAll('.text-behind');

    // 专辑出现的动画
    function cdShow(obj) {
        obj.style.zIndex = 1;
        obj.style.transform = "scale(1.1)";
        obj.style.opacity = 1;
        obj.style.boxShadow = "10px 10px 30px black";
    }

    // 专辑隐藏的动画
    function cdHidden(obj) {
        obj.style.zIndex = 0;
        obj.style.transform = "scale(0.9)";
        obj.style.opacity = 0.5;
        obj.style.boxShadow = "none";
    }

    // 文本选中的动画
    function textShow(obj) {
        obj.style.fontSize = 26 + "px";
        obj.style.opacity = 1;
    }
    // 文本不选中的动画
    function textHidden(obj) {
        obj.style.fontSize = 20 + "px";
        obj.style.opacity = 0.5;
    }

    for (let i = 0; i < cdFront.length; i++) {
        // 调用函数
        cdBehind[i].onmouseover = function () {
            cdShow(cdBehind[i]);
            cdHidden(cdFront[i]);
            textHidden(textFront[i]);
            textShow(textBehind[i]);
        }

        cdFront[i].onmouseover = function () {
            cdShow(cdFront[i]);
            cdHidden(cdBehind[i]);
            textShow(textFront[i]);
            textHidden(textBehind[i]);
        }

        textBehind[i].onmouseover = function () {
            cdShow(cdBehind[i]);
            cdHidden(cdFront[i]);
            textHidden(textFront[i]);
            textShow(textBehind[i]);
        }

        textFront[i].onmouseover = function () {
            cdShow(cdFront[i]);
            cdHidden(cdBehind[i]);
            textShow(textFront[i]);
            textHidden(textBehind[i]);
        }
    }


    /**
     * 专辑随滚动条出现的动画
     */

    var group1 = document.querySelector('.group1');
    var group2 = document.querySelector('.group2');
    var group3 = document.querySelector('.group3');
    var group4 = document.querySelector('.group4');
    var group5 = document.querySelector('.group5');
    var group6 = document.querySelector('.group6');
    var group7 = document.querySelector('.group7');
    var CNname = document.querySelector('.Chinese-name');
    var EGname = document.querySelector('.Eng-name');
    var shell = document.querySelector('.shell');

    function slide(obj, far) {
        setInterval(function () {
            scrollTop = document.documentElement.scrollTop;
            if (scrollTop >= far) {
                obj.style.opacity = 1;
                obj.style.left = 0;
                obj.style.top = 0;
                obj.style.filter = 'blur(0)';
            }
        }, 10)
    }

    slide(CNname, 200);
    slide(EGname, 400);
    slide(group1, 600);
    slide(group2, 1000);
    slide(group3, 1400);
    slide(group4, 1800);
    slide(group5, 2200);
    slide(group6, 2600);
    slide(group7, 3000);
    slide(shell, 0);


    /**
     * 相关的页面跳转
     */
    var mpBtn = document.getElementById('main-page-btn');
    var spBtn = document.getElementById('song-page-btn');
    var btBtn = document.getElementById('but-tic-btn');
    var myBtn = document.getElementById('my-btn');

    mpBtn.onclick = function () {
        window.location.href = "../mainPage/mainPage.html"
    }

    spBtn.onclick = function () {
        window.location.href = "../songsPage/songsPage.html";
    }

    btBtn.onclick = function () {
        window.location.href = "../ticketBuying/ticketBuying.html"
    }

    myBtn.onclick = function () {
        window.location.href = "../loginPages/loginPages.html"
    }


    /**
     *  登陆后用户名更改
     */

    var markPosition = window.location.href.indexOf("?");
    var name = document.getElementById('name');
    var profile = document.querySelector('.profile');

    if (markPosition > 0) {
        markPosition += 10;
        name.innerText = window.location.href.substring(markPosition);
        profile.style.backgroundImage = 'url(./img/头像.webp)'
        profile.style.backgroundSize = 'cover'
    }
    else {
        name.innerText = window.location.href.substring(markPosition);
        name.innerText = "登录/注册";
    }

    /**
     * 获取鼠标位置
     */
    var m = document.querySelector(".mouse")
    //获取鼠标位置并改变鼠标位置
    window.addEventListener("mousemove", function (evt) { 
        m.style.left = evt.x -5 + document.documentElement.scrollLeft + "px"
        m.style.top = evt.y -5 + document.documentElement.scrollTop+ "px"
    })

    var mouseFire = document.querySelector(".mouse-fire");
    window.onmousedown=function(){
        mouseFire.style.opacity = 1;
    }
    window.onmouseup=function(){
        mouseFire.style.opacity = 0;
    }
















}